<template>
    <section>
        <el-card>
            <div class="header">
                <el-button type="primary" size="mini" @click="addCategory">新增</el-button>
            </div>
            <el-table :data="tableData" border>
                <el-table-column prop="id" label="id" width="50"></el-table-column>
                <el-table-column prop="name" label="名称" ></el-table-column>
                <el-table-column prop="img" label="图片" >
                    <template slot-scope="scope">
                        <img :src="path + scope.row.img" class="table-img" >
                    </template>
                </el-table-column>
                <el-table-column prop="url" label="路径" ></el-table-column>
                <el-table-column prop="remark" label="说明" ></el-table-column>
                <el-table-column prop="new" :formatter="newformatter" label="启动" ></el-table-column>
                <el-table-column prop="create_time" label="创建时间" ></el-table-column>
                <el-table-column label="操作" >
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" plain @click="compile(scope.row.id)">编辑</el-button>
                        <el-button type="danger" size="mini" plain @click="del(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </section>
</template>

<script>
export default {
    name: 'AdverList',
    title: '广告图',
    methods: {
        // 新增
        addCategory() {
            this.$router.push({
                path: '/market/adver_add'
            })
        },
        // 编辑
        compile(id) {
            this.$router.push({
                path: `/market/adver_compile/${id}`
            })
        },
        // 删除
        del(id) {
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.getAdverDel(id)
            }).catch(() => {});
        },
        // 删除接口
        async getAdverDel(id) {
            const data = { id}
            let res = await this.$Http.getAdverDel({ data })
            if(res){
                this.tableData = this.tableData.filter(v => v.id !=id )
            }
        },
        // 获取广告列表
        async getAdverList() {
            const res = await this.$Http.getAdverList()
            if(res) {
                this.tableData = res
            }
        }
    },
    data() {
        return {
            tableData: [],
            newformatter: (row) => {
                return row.start? '是' : '否'
            },
        }
    },
    mounted() {
        // 加载列表
        this.getAdverList()
    }
}
</script>

<style lang="scss" scoped>
    .header{
        margin-bottom: 20px;
    }
    .table-img{
        width: 108px;
        height: 108px;
    }
</style>